<script>document.cookie="last=pages/exploradorarchivos.php";</script>
<head>
  <link type="text/css" rel="stylesheet" href="css/jquery-ui.css"/>
  <link type="text/css" rel="stylesheet" href="css/ui.dynatree.css"/>
  <link type="text/css" rel="stylesheet" href="css/jquery.contextMenu.css"/>
  <link type="text/css" rel="stylesheet" href="css/styles.css"/>
</head>

<body>
    <p class="xl">Explorador de archivos</p>
    <p> Una forma rápida de administrar sus carpetas y/o archivos es 
	a través de la vista del explorador de archivos. <br>
	

<?php if($_COOKIE['so']=='android') {?>
	El siguiente tutorial se basa en el explorador de archivos para Android, <b>ES-File-Explorer</b>, 
	el cual no viene incorporado a su Android y por lo tanto deberá descargar dicha aplicación.
	Puede descargar <b>ES-File-Explorer</b> totalmente gratis desde el siguiente enlace: <br>
	<a href="http://es-file-explorer.uptodown.com/android/descargar" title="ES-File-Explorer">
	<img src="img/Escritorio/Android/es_explorador_de_archivos.jpg" height="20">"ES-File-Explorer"
	</a>
	<br>
	<br>
	Al continuación se visualiza una estructura de ejemplo:
	<br>
	</p>
	<img src="img/explorador/android/explorador.png">
	<p><br>
	<b>Elementos del explorador:</b><br>
	Los elementos básicos del explorador son la carpeta y el archivo. 
	<br></p>
	<table width="100%" class="borde_1px">
    <tr>
        <td>
            <img src="img/explorador/android/mp3.png" height="40" title="Imagen de un archivo de audio"><b> Audio</b><br>
			<img src="img/explorador/android/avi.png" height="40" title="Imagen de un archivo de video"><b> Video</b><br>
			<img src="img/explorador/android/pdf.png" height="40" title="Imagen de un archivo de texto"><b> Texto</b><br>
        </td>
        <td>
            <p>El archivo es la representación digital de los datos del usuario de Android, 
			y bien podría ser un libro, un tema musical, un video o una aplicación entre tantos otros.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/folder.png" height="40" title="Imagen de una carpeta"><b> Carpeta</b>
        </td>
        <td>
            <p>La carpeta permite agrupar contenido, ya sean archivos u otras carpetas, dentro de ella.</p>
        </td>
    </tr>
</table>
<p><br>
<b>Acciones sobre el explorador:</b><br>
En la parte superior del explorador se visualiza el siguiente menú:<br>
<img src="img/explorador/android/parent_folder.png" height="20" title="Imagen del menú superior"><br>
Básicamente nos permite lo siguiente:
<br><ul>
Saber cual es la carpeta donde nos encontramos actualmente, en el ejemplo <b>MIS ARCHIVOS</b>.<br>
Saber cual es la carpeta que contiene a <b>MIS ARCHIVOS</b>, en el ejemplo <b>EXPLORADOR</b>.<br> 
Volver hacia la carpeta anterior, presionando una vez sobre <b>EXPLORADOR</b><br>
</ul>
<br>

En la parte inferior se visualiza un menú que proporciona una serie de operaciones 
a realizar sobre el explorador. </p>
	<table width="100%" class="borde_1px">
    <tr>
        <td>
            <img src="img/explorador/android/new.png" height="40" title="Imagen de Nuevo">
        </td>
        <td>
            <p>Permite crear un nuevo elemento en el explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/find.png" height="40" title="Imagen de buscar">
        </td>
        <td>
            <p>Permite encontrar rápidamente un elemento si es que existe.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/update.png" height="40" title="Imagen de actualizar">
        </td>
        <td>
            <p>Permite refrescar el contenido del explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/view.png" height="40" title="Imagen de visualizar">
        </td>
        <td>
            <p>Permite cambiar la visualización del contenido del explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/windows.png" height="40" title="Imagen de ventanas">
        </td>
        <td>
            <p>Permite visualizar distintas ventanas a la vez, entre las cuales alternar el explorador.</p>
        </td>
    </tr>
</table>

<p><br>
Al mantener presionado sobre un elemento del explorador, la vista del mismo cambiará, visualizandosé de la siguiente manera:<br>
<img src="img/explorador/android/explorador_b.png"><br>
Notesén los siguientes cambios: <br>
<ul>Los elementos del explorador ahora se visualizan con la opción de selección/deselección,
las cuáles se alternan al presionar una vez sobre el elemento en cuestión. Observe el siguiente ejemplo:<br>
<img src="img/explorador/android/unselected_folder.png"> carpeta no seleccionada.<br>
<img src="img/explorador/android/selected_folder.png"> carpeta seleccionada.<br><br>
En el menú superior se visualiza lo siguiente:<br>
<img src="img/explorador/android/selection_counter.png"> elementos seleccionados sobre el total.<br>
<img src="img/explorador/android/back.png"> salir de modo selección.<br><br>
Las acciones del menú inferior son distintas y ahora tendrán efecto sobre el/los elemento/s
seleccionado/s particularmente y no sobre el explorador en general.
</ul>
<br>
<br>
<b>Acciones sobre los elementos del explorador:</b><br>
Debajo del explorador se visualiza un menú que proporciona una serie de operaciones 
a realizar sobre los elementos del explorador. </p>
	<table width="100%" class="borde_1px">
    <tr>
        <td>
            <img src="img/explorador/android/copy.png" height="40" title="Imagen de Copiar">
        </td>
        <td>
            <p>Permite copiar el/los elemento/s seleccionado/s en el explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/cut.png" height="40" title="Imagen de cortar">
        </td>
        <td>
            <p>Permite cortar el/los elemento/s seleccionado/s en el explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/delete.png" height="40" title="Imagen de eliminar">
        </td>
        <td>
            <p>Permite eliminar el/los elemento/s seleccionado/s en el explorador.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/rename.png" height="40" title="Imagen de renombrar">
        </td>
        <td>
            <p>Permite cambiar el nombre de el/los elemento/s seleccionado/s en el explorador,
			en el caso de una selección múltiple, se utilizará el mismo nombre en todos los elementos mas una numeración
			incremental por elemento.</p>
        </td>
    </tr>
	<tr>
        <td>
            <img src="img/explorador/android/more.png" height="40" title="Imagen de mas">
        </td>
        <td>
            <p>Permite acceder a una serie de acciones extras, como por ejemplo encriptado, compresión, añadir a favoritos, etc.</p>
        </td>
    </tr>
		<tr>
        <td>
            <img src="img/explorador/android/paste.png" height="40" title="Imagen de pegar">
        </td>
        <td>
            <p>Permite pegar el/los elemento/s seleccionado/s en el explorador.
			Este botón aparece en un nuevo menú, solo después de haber presionado sobre la opción Copiar o Cortar 
			dada una selección.</p>
        </td>
    </tr>
</table>
<p class="felicitacion"> <br><br>                
¡Felicitaciones, ha completado exitosamente el tutorial de explorador de archivos!
</p>
<p class="siguiente">Haga clic sobre <a href="#" onclick="load('./pages/editortexto.php');levelUp('10');">siguiente tutorial</a> para seguir aprendiendo.</p>
		

<?php } else {?>		
	A continuación se muestra un explorador genérico sobre el cual 
	usted deberá interactuar para llevar a cabo el tutorial. </p>	
<table width="100%" style="table-layout: fixed">
<tr>
	<td style="text-align: left; vertical-align: top" width="70%">	
	<p id="T1S1"> 
		1- <b>Crear carpeta:</b> <span id="T1S1-complete"></span> <br>
		Haga clic derecho sobre la carpeta <img src="img/Escritorio/W7/music_folder.png" height="15px"> 
		y seleccione <img src="img/Escritorio/W7/createfolder_option.png" height="15px"> <br>
    </p>
    
	<p id="T1S2" style="display: none"> 
		2- <b>Renombrar carpeta:</b> <span id="T1S2-complete"></span> <br>
        Haga clic derecho sobre <img src="img/Escritorio/W7/nueva_carpeta_folder.png" height="18px">
		y seleccione <img src="img/Escritorio/W7/rename_option.png" height="15px">
    </p>
    <p id="T1S3" style="display: none">
		Borre el nombre anterior, escriba <b>TANGO</b> y presione la tecla ENTER.<br>
    </p>
	
	<p id="T1S4" style="display: none" > 
		3- <b>Contraer carpeta:</b> <span id="T1S4-complete"></span> <br>
		Si no desea visualizar el contenido de una carpeta puede <b>contraerla</b> 
		haciendo clic izquierdo sobre <img src="img/Escritorio/W7/close_node.png">
		o sobre la carpeta.
		Contraiga <img src="img/Escritorio/W7/music_folder.png" height="15px">	<br>
	</p>
	
	<p id="T1S5" style="display: none"> 
		4- <b>Expandir carpeta:</b> <span id="T1S5-complete"></span> <br>
		Si desea visualizar el contenido de una carpeta contraída puede <b>expandirla</b>
		haciendo clic izquierdo sobre <img src="img/Escritorio/W7/open_node.png">
		o sobre la carpeta.
        Expanda <img src="img/Escritorio/W7/music_folder.png"  height="15px"> <br>
    </p>
    
	<p id="T1S6" style="display: none"> 
		5- <b>Mover carpeta:</b> <span id="T1S6-complete"></span> <br>
        Mantenga pulsado clic izquierdo sobre <img src="img/Escritorio/W7/gardel_folder.png" height="15px"> 
        y mueva el mouse hasta estar sobre <img src="img/Escritorio/W7/tango_folder.png" height="15px">,
		deberá visualizar lo siguiente <img src="img/Escritorio/W7/move_subfolder.png" height="20px">
        ahora suelte clic izquierdo. <br>
    </p>
    
	<p id="T1S7" style="display: none"> 
		6- <b>Eliminar carpeta:</b> <span id="T1S7-complete"></span> <br>
        Haga clic derecho sobre <img src="img/Escritorio/W7/gardel_folder.png" height="15px"> 
		y seleccione <img src="img/Escritorio/W7/delete_option.png" height="15px"> <br>
    </p>
    
	<div id="T-complete" style="display: none"> 
		<p class="felicitacion"> <br><br>                
			¡Felicitaciones, ha completado exitosamente el tutorial de explorador de archivos!
		</p>
        <p class="siguiente">Haga clic sobre <a href="#" onclick="load('./pages/editortexto.php');levelUp('10');">siguiente tutorial</a> para seguir aprendiendo.</p>
	</div>

    <td width="30%"  style="text-align:left; vertical-align: top" >	
	<!-- Menu contextual -->
    <ul id="myMenu" class="contextMenu">
		<li class="createfolder"><a href="#createfolder">Crear carpeta</a></li>
		<li class="delete"><a href="#delete">Eliminar</a></li>
		<li class="edit"><a href="#rename">Renombrar</a></li>
	</ul>

	<!-- Estructura inicial del árbol -->
    <div id="tree" style="display:" >
	<ul>
		<li id="id1" class="folder expanded active">MUSICA
		<ul>
		  <li id="id3.2" class="folder">GARDEL
		</ul>
	</ul>
	</div>
	</td>	
</tr>	
</table>	
<?php } ?>	

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.dynatree.js"></script>

<script type="text/javascript" src="js/jquery.contextMenu-custom.js"></script>
<script type="text/javascript" src="js/file_explorer.js"></script>

</body>
